<template>
	<div class="login">
		<div class="by">
			<div class="meteor" :style="`transform:rotate(${40}deg)`">
				<div class="line" :style="`animationDelay:${1.5}s;width:${2}px;height:${100}px;`"></div>
				<div class="line" :style="`animationDelay:${5}s;width:${1}px;height:${100}px;`"></div>
			</div>
			<div class="meteors" :style="`transform:rotate(${45}deg)`">
				<div class="lines" :style="`animationDelay:${3.5}s;width:${2}px;height:${100}px;`"></div>
			</div>
			<div class="meteort" :style="`transform:rotate(${50}deg)`">
				<div class="linet" :style="`animationDelay:${2.5}s;width:${2}px;height:${100}px;`"></div>
				<div class="linet" :style="`animationDelay:${5}s;width:${1}px;height:${100}px;`"></div>
			</div>

			<div class="login-conter">
				<div class="form">
					<h3>CS博客</h3>
					<label for="username">用户名</label>
					<input type="text" placeholder="UserName" id="username" v-model="registerParams.account">

					<label for="nickname">别名</label>
					<input type="text" placeholder="nickName" id="nickname" v-model="registerParams.nickname">

					<label for="password">密码</label>
					<input type="password" placeholder="Password" id="password" @keydown.enter="firmShowdialog"
						v-model="registerParams.password">

					<button @click="firmShowdialog">申请</button>

					<div class="social">
						<div class="go" @click="$router.push({name:'Home'})"><i class="fas fa-gamepad"></i>首页</div>
						<div class="fb" @click="$router.push({path:'/Login'})"><i class="far fa-comments"></i>登录</div>
					</div>
				</div>
			</div>

			<el-dialog title="申请通知" :visible.sync="dialogVisible" width="40%">
				<div style="text-align: center;">

					<el-form :model="registerParams" label-width="100px">
						<el-form-item label="QQ邮箱">
							<span slot="label">
								<el-tooltip content="后台账号密码会已QQ邮箱的方式发送给您~" placement="top">
									<i class="el-icon-question"></i>
								</el-tooltip>
								QQ邮箱
							</span>
							<el-input v-model="registerParams.email" placeholder="请填真实的qq邮箱"></el-input>
						</el-form-item>
						<el-form-item label="手机号">
							<span slot="label">
								<el-tooltip content="请填写真实手机号,后台登录要用到~" placement="top">
									<i class="el-icon-question"></i>
								</el-tooltip>
								手机号
							</span>
							<el-input v-model="registerParams.phone" placeholder="请填写真实手机号"></el-input>
						</el-form-item>
						<el-form-item label="申请原因" label-position="top">
							<el-input type="textarea" :rows="2" placeholder="请输入原因" v-model="registerParams.purpose">
							</el-input>
						</el-form-item>
					</el-form>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">算了</el-button>
					<el-button type="primary" @click="firmRegister">确 定</el-button>
				</span>
			</el-dialog>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				registerParams: {
					account: "",
					nickname: '',
					password: "",
					email: "",
					phone: "",
					purpose: ""
				},
				dialogVisible: false
			};
		},
		mounted() {},
		methods: {
			firmShowdialog() {
				if (this.registerParams.account.trim() == null || this.registerParams.account.trim() == "") {
					this.$message.warning("用户名不能为空!")
				} else if (this.registerParams.nickname.trim() == null || this.registerParams.nickname.trim() == "") {
					this.$message.warning("别名不能为空!")
				} else if (this.registerParams.password.trim() == null || this.registerParams.password.trim() == "") {
					this.$message.warning("密码不能为空!")
				} else {
					let regular = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
					if (!regular.test(this.registerParams.password)) {
						this.$message.warning("密码必须包含字母和数字的，且6~18位之间")
						this.registerParams.password = ""
						return;
					}
					this.dialogVisible = true
				}
			},

			async firmRegister() {
				if (this.registerParams.email.trim() == null || this.registerParams.email.trim() == "") {
					this.$message.warning("邮件不能为空!")
				} else if (this.registerParams.phone.trim() == null || this.registerParams.phone.trim() == "") {
					this.$message.warning("手机号不能为空!")
				} else if (this.registerParams.purpose.trim() == null || this.registerParams.purpose.trim() == "") {
					this.$message.warning("原因不能为空!")
				} else {
					var emailreg =
						/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
					if (!emailreg.test(this.registerParams.email)) {
						this.$message.warning("邮箱格式不正确~")
						this.registerParams.email = ""
						return
					}
					let reg = /^1[13456789]\d{9}$/
					if (!reg.test(this.registerParams.phone)) {
						this.$message.warning("手机号格式不正确~")
						this.registerParams.phone = ""
						return
					}
					let res = await this.$api.user.register(this.registerParams)
					if (res.code == 200) {
						// this.$message.success("申请成功!")
						this.$notify({
							title: '提示',
							type: 'success',
							message: '申请成功,等待管理员审核后已QQ邮箱的方式通知您~',
							duration: 0
						});
						this.registerParams = Object.assign(this._data.registerParams, this.$options.data()
							.registerParams)
						this.dialogVisible = false
					} else {
						this.dialogVisible = false
						this.registerParams = Object.assign(this._data.registerParams, this.$options.data()
							.registerParams)
					}
				}
			}
		},

	};
</script>

<style lang="less" scoped>
	.by {
		background: url("https://blog-chen.oss-cn-shanghai.aliyuncs.com/1a55c797db8d42548da8308b74c67aab.png") no-repeat;
		width: 100%;
		min-height: 100vh;
		background-size: 100% 100%;
		background-attachment: fixed;
		position: relative;
		z-index: 10;
	}

	.login-conter {
		width: 1250px;
		margin: 0 auto;
		height: 100vh;
		// border: 1px solid red;
	}

	.form {
		height: 520px;
		width: 400px;
		background-color: rgba(0, 0, 0, 0.13);
		position: absolute;
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;
		border-radius: 10px;
		backdrop-filter: blur(10px);
		border: 2px solid rgba(255, 255, 255, 0.09);
		box-shadow: 0 0 40px rgba(20, 18, 42, 0.6);
		padding: 50px 35px;
	}

	.form * {
		font-family: 'Poppins', sans-serif;
		color: #ffffff;
		letter-spacing: 0.5px;
		outline: none;
		border: none;
	}

	.form h3 {
		font-size: 32px;
		font-weight: 500;
		line-height: 42px;
		text-align: center;
	}

	label {
		display: block;
		margin-top: 30px;
		font-size: 16px;
		font-weight: 500;
	}

	.form input {
		display: block;
		height: 50px;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.07);
		border-radius: 3px;
		padding: 0 10px;
		margin-top: 8px;
		font-size: 14px;
		font-weight: 300;
	}

	.form button {
		margin-top: 50px;
		width: 100%;
		background-color: #ffffff;
		color: #080710 !important;
		padding: 15px 0;
		font-size: 18px;
		font-weight: 600;
		border-radius: 5px;
		cursor: pointer;
	}

	.social {
		margin-top: 30px;
		display: flex;
	}

	.social div {
		background: red;
		width: 150px;
		line-height: 15px;
		border-radius: 3px;
		padding: 5px 10px 10px 5px;
		background-color: rgba(255, 255, 255, 0.27);
		color: #eaf0fb;
		text-align: center;
	}

	.social div:hover {
		background-color: rgba(255, 255, 255, 0.47);
	}

	.social .co {
		margin-left: 25px;
	}

	.social i {
		margin-right: 4px;
	}

	::placeholder {
		color: #e5e5e5;
	}

	.fb {
		margin-left: 71px;
	}



	.meteor {
		width: 2px;
		height: 200px;
		position: relative;
		margin: 0 auto;
		float: left;
		margin-left: 300px;

		// overflow: hidden;
		.line {
			animation: meteoring 6s infinite linear;
			position: absolute;
			width: 2px;
			height: 200px;
			background: linear-gradient(to top,
					rgb(2, 161, 195, 1),
					rgba(11, 36, 66, 0.1));
			border-radius: 2px;
			box-shadow: 0px 10px 20px 0px #02a1c3;
			opacity: 0;

			&::before {
				width: 2px;
				height: 2px;
				content: "";
				position: absolute;
				bottom: 0px;
				left: 0px;
				border-radius: 50%;
				background: #00d0ff;
				box-shadow: 0px 0px 12px 5px #00d0ff;
			}
		}
	}


	.meteors {
		width: 2px;
		height: 200px;
		position: relative;
		margin: 0 auto;
		float: left;
		margin-left: 500px;


		// overflow: hidden;
		.lines {
			animation: meteoring 6s infinite linear;
			position: absolute;
			width: 2px;
			height: 200px;
			background: linear-gradient(to top,
					rgb(2, 161, 195, 1),
					rgba(11, 36, 66, 0.1));
			border-radius: 2px;
			box-shadow: 0px 10px 20px 0px #02a1c3;
			opacity: 0;

			&::before {
				width: 2px;
				height: 2px;
				content: "";
				position: absolute;
				bottom: 0px;
				left: 0px;
				border-radius: 50%;
				background: #00d0ff;
				box-shadow: 0px 0px 12px 5px #00d0ff;
			}
		}
	}


	.meteort {
		width: 2px;
		height: 200px;
		position: relative;
		float: right;
		margin-right: 300px;

		// overflow: hidden;
		.linet {
			animation: meteoring 6s infinite linear;
			position: absolute;
			width: 2px;
			height: 200px;
			background: linear-gradient(to top,
					rgb(2, 161, 195, 1),
					rgba(11, 36, 66, 0.1));
			border-radius: 2px;
			box-shadow: 0px 10px 20px 0px #02a1c3;
			opacity: 0;

			&::before {
				width: 2px;
				height: 2px;
				content: "";
				position: absolute;
				bottom: 0px;
				left: 0px;
				border-radius: 50%;
				background: #00d0ff;
				box-shadow: 0px 0px 12px 5px #00d0ff;
			}
		}
	}

	@keyframes meteoring {
		0% {
			opacity: 0;
			top: -250px;
		}

		25% {
			opacity: 0.5;
			top: 0px;
		}

		50% {
			opacity: 0.8;
			top: 250px;
		}

		75% {
			opacity: 1;
			top: 500px;
		}

		100% {
			opacity: 0;
			top: 750px;
		}
	}
</style>
